<template name="slide-right">
    <transition>
        <v-touch v-on:swiperight="" class="language-box">
            <!--<header class="mui-bar mui-bar-nav">-->
                <!--<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left currency-back" @click="backRoute()"></a>-->
                <!--<div class="mui-title currency-title">{{ $t('m.common.currency.listTitle') }}</div>-->
                <!--&lt;!&ndash;TODO&ndash;&gt;-->
                <!--&lt;!&ndash;<button class="mui-btn mui-btn-link mui-pull-right language-save">保存</button>&ndash;&gt;-->
            <!--</header>-->
            <div class="currency-title">
                <span class="mui-icon mui-icon-back"  @click="backRoute()"></span>
                <span>{{ $t('m.common.currency.listTitle') }}</span>
                <span></span>
            </div>
            <div class="language-item">
                <ul class="mui-table-view">
                    <li class="mui-table-view-cell" @click="doCurrency('CNY')">CNY
                        <span class="mui-icon" :class="currency_v=='CNY'?'mui-icon-checkmarkempty':''"></span>
                    </li>

                    <li class="mui-table-view-cell" @click="doCurrency('USD')">USD
                        <span class="mui-icon" :class="currency_v=='USD'?'mui-icon-checkmarkempty':''"></span>
                    </li>
                </ul>
            </div>
        </v-touch>
    </transition>
</template>
<script>
    /* eslint-disable */
    export default {
        name: 'currency',
        created() {
            this.currency_v = localStorage.getItem("currency") ? localStorage.getItem("currency") : 'USD';
        },
        mounted() {
        },
        data() {
            return {
                currency_v: "",
            }
        },
        methods: {
            doCurrency: function (v) {
                this.currency_v = v;
                localStorage.setItem("currency", v);
                this.$store.dispatch("aExchange", {type: v});
            }
        }
    }
</script>
<style scoped>
    .language-box {
        overflow: hidden;
        height: 100%;
    }

    .language-box > header {
        height: 1.18rem;
        background: #FBFCFD;
        box-shadow: none;
        border-bottom: 0.01rem solid #ddd;
        position: inherit;
    }

    .language-box .language-save {
        color: #000;
    }

    .language-box .mui-pull-left {
        color: #000;
    }

    .language-item .mui-icon-checkmarkempty {
        color: #1087CD;
        float: right;
        font-size: .56rem;
        width: .42rem;
        height: .42rem;

    }

    .language-item .mui-table-view-cell:after {
        left: 0;
    }

    .language-item li {
        font-size: .3rem;
        padding: 18px 15px;
    }
    .currency-back{
        margin-top: 0.3rem;
    }
    .currency-title{
        width: 100%;
        height: 1.3rem;
        line-height: 1.65rem;
        font-size: 0.3rem;
        background-color: #FBFCFD;
        border-bottom: 0.01rem solid #ddd;
        display: flex;
        justify-content: space-between;
    }
    .currency-title span:last-child{
        width: 10%;
    }
    .mui-icon-back{
        margin-left: 0.2rem;
        line-height: 1.65rem;
        font-size: 0.48rem!important;
    }
    .mui-table-view:before{
        background-color: transparent;
    }
    @media only screen and (width: 375px) and (height: 812px){
        .currency-title{
            height: 1.5rem;
            line-height: 2.2rem;
        }
        .mui-icon-back {
            line-height: 2.2rem;
        }
    }
</style>
